<template>
    <div style="height: 100%">
      <!-- <scroller> -->
      <div>
      <x-header title="slot:overwrite-title" :left-options="{backText:'',preventGoBack:'true'}"
                @on-click-back="toHome">
        <!-- {{tabIndex == 0? "新闻": "公告"}} -->
        <div slot="overwrite-title" class="topic">
         <template v-for="(item, i) in message_titles">
            <div class="title" @click="getMessage(i)" :class="{active: messageIndex == i}" :key="i">
              <span>{{item}}</span>
              <div class="underline" v-if="messageIndex == i"></div>
              <!-- <img src="../assets/img/title-down.png" v-if="messageIndex == i"> -->
            </div>
          </template>
        </div>
      </x-header>
      <!-- <x-header :left-options="{backText:'', preventGoBack: 'true'}"
                @on-click-back="$router.go(-1)" v-else-if="tabIndex == 1" title="公告"></x-header>
      <x-header :left-options="{backText:'', preventGoBack: 'true'}"
                @on-click-back="$router.go(-1)" v-else  title="文件"></x-header> -->

      <!-- <div>
        <tab custom-bar-width="40px" active-color='#f2a201' v-model="tabIndex">
          <tab-item :selected="selectedTitle === item" v-for="(item, tabIndex) in title" @on-item-click="changeType" :key="tabIndex">{{item}}</tab-item>
        </tab>
      </div> :on-infinite="infinite" ref="taskScroller" -->
      <!-- <scroller> -->
      <simple-search @onSearch="searchNews" placeholder="输入名称或关键词"></simple-search>
      <div class="news-content">
          <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">       
          <div style="padding: 0 20px 0 16px">
            <div class="news-item" v-for="(item, index) in newsList" @click="openInfo(item)" v-if="messageIndex == 0" >
                <div class="news-item-title" v-html="item.TITLE" v-if="item.ISFOLDER == 'False'"></div>
                <div v-else class="folder_div">
                  <img src="../../assets/img/folder.png" class="folder_img"/>
                  <div class="news-item-title folder_title" v-html="item.TITLE"></div>
                </div>
                <div>
                  <span class="date-time">{{item.DATETIME.substring(0, 10)}}</span>
                  <!-- <span class="date-time">{{item.DATETIME.substring(11, 16)}}</span> -->
                </div>
              
            </div>
            <div class="news-item" v-for="(item1, index1) in noticeList" @click="openInfo(item1)" v-if="messageIndex == 1">
              <div class="news-item-title" v-html="item1.TITLE" v-if="item1.ISFOLDER == 'False'"></div>
                <div v-else class="folder_div">
                  <img src="../../assets/img/folder.png" class="folder_img"/>
                  <div class="news-item-title folder_title" v-html="item1.TITLE"></div>
                </div>
                <div>
                  <span class="date-time">{{item1.DATETIME.substring(0, 10)}}</span>
                  <!-- <span class="date-time">{{item.DATETIME.substring(11, 16)}}</span> -->
                </div>
            </div>
            <div class="news-item" v-for="(item2, index2) in fileList" @click="openInfo(item2)" v-if="messageIndex == 2">
              <div class="news-item-title" v-html="item2.TITLE" v-if="item2.ISFOLDER == 'False'"></div>
                <div v-else class="folder_div">
                  <img src="../../assets/img/folder.png" class="folder_img"/>
                  <div class="news-item-title folder_title" v-html="item2.TITLE"></div>
                </div>
                <div>
                  <span class="date-time">{{item2.DATETIME.substring(0, 10)}}</span>
                  <!-- <span class="date-time">{{item.DATETIME.substring(11, 16)}}</span> -->
                </div>
            </div>

          </div>
          </v-touch>
      </div>
      
      <!-- </scroller> -->
      </div>
      <router-view style="height:100%;"></router-view>
     <!-- </scroller> -->
    </div>
</template>

<script>
  import { Tab, TabItem } from 'vux'
  const titleList = () => ['新闻', '公告','文件'];
    export default {
        name: "publicInfo",
      // deactivated () { //清除keep-alive的缓存
      //   this.$destroy(true)
      // },
     
      data(){
          return{
            title: titleList(),
            selectedTitle: '新闻',
            tabIndex: 0,
            list: [],
            pageIndex: 0,
            pageSize: 50,
            loading: false,
            newsList: [],
            noticeList: [],
            fileList:[],
            type: 'QYXW',
            messageIndex: this.$route.query.messageIndex,
            message_titles: [
            '文件',
            '公告',
            '新闻'
          ],
          keyword : ""
          }
      },
      mounted(){
        //console.log(this.messageIndex)
        // this.newsList = this.$store.state.newsData;
        // this.noticeList = this.$store.state.noticeData;
        console.log(this.messageIndex);
        this.getMessage(this.messageIndex);
      },
      methods: {
        onSwipeRight(){
           this.$router.push({
            path : '/index/home',
            name : 'home'
          })
        },
        toHome(){
          this.$router.push({
            path : '/index/home',
            name : 'home'
          })
        },
        searchNews(val){
        //  todo 搜索功能添加
         this.keyword = val;
         this.getMessage(this.messageIndex)
        },
        refresh(done) {
          this.pageIndex = 1;
          this.loading = true;
          this.getNews((res) => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == '200' && res.data.datas.length > 0) {
              if(this.tabIndex == 0){
                this.newsList = [...this.newsList, ...res.data.datas]
              }else{
                this.noticeList = [...this.noticeList, ...res.data.datas]
              }
              this.pageIndex++;
              done();
            } else {
              done(true)//有错误的情况或者没有记录，传参true
            }
          }, () => {
            done(true);
          });
        },
        infinite(done) {//上划加载方法
          if(this.loading) {
            done();
          } else {
            this.getNews((res) => {
              //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
              if (res.status == '200' && res.data.datas.length > 0) {
                if(this.tabIndex == 0){
                  this.newsList = [...this.newsList, ...res.data.datas]
                }else{
                  this.noticeList = [...this.noticeList, ...res.data.datas]
                }
                this.pageIndex++;
                done();
              } else {
                done(true)//有错误的情况或者没有记录，传参true
              }
            }, () => {
              done(true)
            });
          }
        },
        changeType() {
          this.pageIndex = 0;
          // this.list = [];
          if(this.tabIndex == 0){
            this.type = 'QYXW'
          }else {
            this.type = 'QYTZ'
          }

          this.getNews((res) =>{
            if(this.tabIndex == 0){
              this.newsList = res.data.data;
            }else{
              this.noticeList = res.data.data;
            }
          }, () => {
            console.log('error');
          });

          this.$refs.taskScroller.finishInfinite(false);
        },
        getNews(callback, failed){
          this.$ajax({
            url: this.COMMON_URL,
            method: "post",
            data: {
              _method:"CMS_COMMON.getDataList",
              tableName: "CMS_INFORMATION",
              directory: this.type,
              pageIndex: this.pageIndex,
              pageSize: this.pageSize,
              sortField: "DATETIME",
              sortOrder: "desc"
            }
          }).then((res) =>{
            callback(res);
          }).catch(err => {
            failed()
          })
        },
        openInfo(item){
          //console.log("item",item);
          // TODO 需要进行新的请求
          // this.$ajax({
          //   url: this.COMMON_URL,
          //   method: "get",
          //   data: {
          //     _login: 0,
          //     callback: "jQuery17205883937331670144_1556594989905",
          //     _method: "CMS_INFORMATION.getContent",
          //     guid: item.GUID,
          //     loginId: item.USERNAME,
          //     _: 1556594989944
          //   }
          // }).then((res) => {
          //   console.log(res);
          // });
          //this.$store.commit("SET_NEWS_ROW", item);
          if(item.ISFOLDER == "True"){
            this.$router.push({
              path : '/publicInfo/folderDetail',
              name : 'folderDetail',
              params : {
                item : item,
                messageIndex : this.messageIndex
              }
            })
          }else{
            this.$router.push({
              path: '/publicInfo/publicDetailInfo',
              name: 'publicDetailInfo',
              query : {
                item : item,
                title : item.TITLE,
                datetime : item.DATETIME,
                content : item.CONTENT,
                contentattachmentid : item.CONTENTATTACHMENTID,
                attachmentid : item.ATTACHMENTID,
                messageIndex : this.messageIndex
              }
            })
          }
        },
        // getFilter(fields, value) {
        //   var filter = '';
        //   if(value != '') {
        //     filter = ' and (';
        //     for(var i=0; i<fields.length; i++) {
        //       if(i != 0) {
        //         filter += ' or ';
        //       }
        //       filter += '(' + fields[i] + ' like \'%' + value + '%\' or \'' + value + '\'=\'\')';
        //     }
        //     filter += ')';
        //     console.log(filter);
        //   }
        //   return filter;
        // },
        getMessage(i){
            var filter = ''
            if(this.keyword !=""){
              filter =  '{"TITLE":"'+this.keyword+'","DEPARTMENT":"","DATETIME1":"","DATETIME2":""}'
            }
            //console.log(filter)
            this.messageIndex = i
            var temp = 0;
            if(i==0){
               temp = 10420
            }else if(i==1){
               temp = 10417
            }else{
               temp = 10416
            }
            this.$ajax({
                url: this.COMMON_URL, //+'?_method=CMS_COMMON.getDataList&tableName=CMS_INFORMATION&directory=' + temp,
                method: 'POST',
                data: {
                    _method : "CMS_COMMON.getDataList",
                    tableName : "CMS_INFORMATION",
                    directory : temp,
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    sortField: "DATETIME",
                    sortOrder: "desc",
                    MiniQueryFormData : filter
                }
            }).then(res =>{
                console.log(res)
                if(i==0){
                    this.newsList = res.data.data
                    var newsList1 = [];
                    for(var j=0;j<this.newsList.length;j++){
                      if(this.newsList[j].ISFOLDER == 'True'){
                        newsList1.unshift(this.newsList[j]);
                      }else{
                        newsList1.push(this.newsList[j]);
                      }
                    }
                    this.newsList = newsList1;
                }else if(i==1){
                    this.noticeList = res.data.data
                     var noticeList1 = [];
                    for(var j=0;j<this.noticeList.length;j++){
                      if(this.noticeList[j].ISFOLDER == 'True'){
                        noticeList1.unshift(this.noticeList[j]);
                      }else{
                        noticeList1.push(this.noticeList[j]);
                      }
                    }
                    this.noticeList = noticeList1;
                }else{
                    this.fileList = res.data.data
                     var fileList1 = [];
                    for(var j=0;j<this.fileList.length;j++){
                      if(this.fileList[j].ISFOLDER == 'True'){
                        fileList1.unshift(this.fileList[j]);
                      }else{
                        fileList1.push(this.fileList[j]);
                      }
                    }
                    this.fileList = fileList1;
                }
            })
        }
      },
      components: {
        Tab,
        TabItem,
      }
    }
</script>

<style scoped>
.folder_title{
  margin-left: 10px;
}
.folder_div{
  display: flex;
}
.folder_img{
  width: 32px;
  height: 32px;
}
  .moa-search-div{
    margin: 0 !important;
    padding: 12px 16px !important;
    width: 100% !important;
    background-color: #4D86FF !important;
    border : none !important;
    border-radius: 0px !important;
  }
  .news-content{
    /* width: 100%;
    height:-webkit-fill-available;
     padding: 0 20px 50px 16px; 
    background: #ffffff;
    border-top: 1px solid #eaeaea;
    overflow: auto;
    position: relative; */
    overflow: auto;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .news-item{
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #F2F4F6;
  }
  .news-item-title{
    font-size: 18px;
    font-weight: 400;
    word-break: break-all;
    color: #191919FF;
    display: block;
  }
  .date-time{
    font-size: 11px;
    color: #b6b6b6;
    margin-right: 16px;
    margin-top: 10px;
    line-height: 11px;
    display: inline-block;
  }
  .title{
    box-sizing: border-box;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    height: 30px;
    margin-top: 2%;
    display: flex;
    flex-direction: column
  }
   .underline{
    width: 16px;
    height: 3px;
    background: #ffffff;
    border-radius: 4px;
    position: relative;
    top: 5%;
    left: 20%;
  }
  .topic{
    display: flex;
    position: relative;
    width: 45%;
    justify-content: space-between;
    margin: auto
  }
  .topic .active{
    color: #FFFFFF
  }
  /* .transition-view /deep/ .vux-header{
    background-color: #ffffff !important;
  }
  .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before{
    border-color: #cccccc;
  }  */
   .transition-view .vux-header /deep/ .vux-header-title-area, .vux-header .vux-header-title{
    margin: auto;
    width : 100%
  }

</style>
